<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 公共头部部分 -->
<jsp:include page="_header.jsp"></jsp:include>
<!-- end -->
<title>柱状图统计</title>
</head>
<body>
<div class="page-container">
	<div class="f-14 c-error"></div>
	[  <a href="email" style="color: blue">发送Eamil</a>  ]
	<div align="center">
		<form class="form form-horizontal" id="form-article-add">
			<input type="text" value="${id }" name="id" id="id" class="hidden">
			
			<input type="date" value="" placeholder="开始时间" id="ctStartDate" name="ctStartDate" class="input-text Wdate" style="width:220px;">
			<input type="date" value="" placeholder="结束时间" id="ctStopDate" name="ctStopDate" class="input-text Wdate" style="width:220px;">
			<button id="button" onClick="article_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 提交</button>
		</form>
	</div>
	<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!-- 公共修改，增加页脚部分 -->
<jsp:include page="_footer-add-update.jsp"></jsp:include>
<!-- end -->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${pageContext.request.contextPath }/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
var categorie;
var service=new Array();
var id =$("#id").val();

$(function () {
    	$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath }/educProductCharts/findDate",
			data:{
				id:id
			},
			success:function(data){
				categorie=data.time;
                var i = 0;
					for ( var keys in data) {
						if (keys == "time") {
							continue;
						} else {
							service[i] = {
								name : keys,
								data : data[keys]
							}
							i++;
						}
					}
					$('#container').highcharts({
                	
					     chart: {
					            type: 'bar'
					        },
					        title: {
					            text: '课时统计图'
					        },
					        xAxis: {
					            categories: categorie
					        },
					        yAxis: {
					            min: 0,
					            title: {
					                text: '教员上课统计'
					            }
					        },
					        legend: {
					            reversed: true
					        },
					        plotOptions: {
					            series: {
					                stacking: 'normal'
					            }
					        },
					        series: service
				    });
					
			},
			error:function(data){//当访问时候，404，500 等非200的错误状态码
				layer.msg('error!',{icon:2,time:1000});
			}
			
		});
});

$(function () {
var startDate=$("#ctStartDate").val();
var stopDate=$("#ctStopDate").val();
	$("#form-article-add").validate({
		rules:{
			teacherId:{
				required:true,
			},
			teacher_name:{
				required:true,
			},
			teacher_email:{
				required:true,
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
            $(form).ajaxSubmit({
                type: "post",
                url: "${pageContext.request.contextPath }/educProductCharts/findDate",
                dataType: "json",
                success: function(data){
	                categorie=data.time;
	                var i = 0;
					for ( var keys in data) {
						if (keys == "time") {
							continue;
						} else {
							service[i] = {
								name : keys,
								data : data[keys]
							}
							i++;
						}
					}
					$('#container').highcharts({
                	
					     chart: {
					            type: 'bar'
					        },
					        title: {
					            text: '课时统计图'
					        },
					        xAxis: {
					            categories: categorie
					        },
					        yAxis: {
					            min: 0,
					            title: {
					                text: '教员上课统计'
					            }
					        },
					        legend: {
					            reversed: true
					        },
					        plotOptions: {
					            series: {
					                stacking: 'normal'
					            }
					        },
					        series: service
				    });
                }, 
               error: function(XmlHttpRequest, textStatus, errorThrown){  
                    layer.msg('ERROR!',{icon:2,time:1000});  
                }  
            });  
        }  
		
	});
});	


			
</script>
</body>
</html>